<!--
 * @Date: 2022-01-02 12:27:27
 * @LastEditors: LeeKing
 * @LastEditTime: 2022-01-05 14:58:28
 * @FilePath: \hmmm-20220102\src\module-manage\pages\menus.vue
-->
<template>
  <div>
    <!-- // ~卡片 -->
    <el-card class="box-card">
      <!-- // ~添加菜单按钮 -->
      <el-button
        type="success"
        icon="el-icon-edit"
        size="small"
        class="btnAdd"
        @click="addMenu"
        >添加菜单</el-button
      >
      <!-- // ~From表单 -->
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'childs' }"
        :header-cell-class-name="headerRowStyle"
      >
        <el-table-column prop="title" label="标题" width="200">
          <template slot-scope="{ row }">
            <i class="el-icon-folder-opened" v-if="row.pid === null"></i>
            <i class="el-icon-view" v-else-if="row.is_point === true"></i>
            <i class="el-icon-document-remove" v-else></i>
            {{ row.title }}
          </template>
        </el-table-column>
        <el-table-column prop="code" label="权限点代码" width="1333">
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="{ row }">
            <!-- // ~编辑权限组 -->

            <el-button
              type="primary"
              icon="el-icon-edit"
              plain
              circle
              @click="EditBtn(row.id)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="remove(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- // ~创建菜单/编辑菜单 -->
      <menu-add
        :visible.sync="DialogVisible"
        @newDataes="loadList"
        :typeStatus.sync="typeStatus"
        @handleCloseModal="DialogVisible = $event"
        ref="menu"
      ></menu-add>
    </el-card>
  </div>
</template>

<script>
import { list, remove } from '@/api/base/menus.js'
import menuAdd from '../components/menu-add.vue'
export default {
  name: 'Menus',
  components: { menuAdd },
  data () {
    return {
      // ~
      tableData: [],
      DialogVisible: false,
      typeStatus: false
    }
  },

  computed: {
    text () {
      return this.tableData.id ? '编辑菜单' : '创建菜单'
    }
  },
  created () {
    // !进入页面就渲染菜单列表
    this.loadList()
  },

  methods: {
    headerRowStyle (obj) {
      console.log(obj.column.label === '操作')
      if (obj.column.label === '操作') {
        return 'ddxxys'
      }
    },

    // ! 获取菜单列表
    async loadList () {
      const res = await list()

      this.menuHandle(res.data)
      this.tableData = res.data
    },

    // !递归！使数据keys值变为childs
    menuHandle (arr) {
      arr.forEach((item) => {
        if (item.childs?.length) {
          this.menuHandle(item.childs)
        } else if (item.points?.length) {
          item.childs = item.points
        }
      })
    },

    // ~添加菜单
    addMenu () {
      this.DialogVisible = true
      // 重置表单
      this.$refs.menu.handleResetForm()
    },
    EditBtn (id) {
      this.$refs.menu.hanldeEditForm(id)
      this.typeStatus = true
      this.DialogVisible = true
    },
    remove (row) {
      //
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove(row)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.loadList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style scoped lang="less">
// ~卡片样式
.box-card {
  margin: 20px;
  // ~按钮样式
  .btnAdd {
    float: right;
    margin-bottom: 30px;
  }
  ::v-deep .el-table__expand-icon {
    display: none;
  }
  ::v-deep .is-leaf el-table__cell:nth-of-type(2) {
    text-align: center;
  }
  ::v-deep .el-table th.is-leaf {
    border-bottom: 2px solid #e8e8e8;
    background-color: #fafafa;
  }
  ::v-deep th.is-center {
    text-align: center;
  }
  ::v-deep .ddxxys {
    text-align: center;
  }
}
</style>
